<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习</title>
		<script src="js/d3.v4.min.js" charset="utf-8"></script>
	</head>
	<body>
		
		<script>
			//饼图、弦图等使用
			//创建画布
			var svg=d3.select("body").append("svg").attr("height",600).attr("width",600);
			//innerRadius()、OutRadius()、startAngle()、endAngle()
			var dataset={startAngle:0,endAngle:Math.PI*0.75};
			//创建一个弧生成器
			var arcpath=d3.arc()
						  .innerRadius(50)
						  .outerRadius(100);
			//添加路径
			svg.append("path").attr("d",arcpath(dataset))
							  .attr("transform","translate(100,150)")
							  .attr("stroke","black")
							  .attr("stroke-width","3px")
							  .attr("fill","yellow");
/*			//创建一个饼图
			var dataset=[{startAngle:0,endAngle:Math.PI*0.6},
						 {startAngle:Math.PI*0.6,endAngle:Math.PI},
						 {startAngle:Math.PI,endAngle:Math.PI*1.7},
						 {startAngle:Math.PI*1.7,endAngle:Math.PI*2}];
			var arcpath=d3.arc()
						  .innerRadius(0)
						  .outerRadius(100);
			//各弧形的颜色
			var color=d3.scaleOrdinal(d3.schemeCategory10);	
			//添加路径，创建饼图
			svg.selectAll("path").data(dataset)
							  .enter()
							  .append("path")
							  .attr("d",function(d){return arcpath(d);})
						      .attr("transform","translate(150,200)")
						      .attr("stroke","black")
						      .attr("stroke-width","2px")
						      .attr("fill",function(d,i){return color(i);});
			//添加文本
			svg.selectAll("text").data(dataset)
							  	 .enter()
							  	 .append("text")
							  	 .attr("transform",function(d,i){return "translate(150,200)"+"translate("+arcpath.centroid(d)+")";})
							  	 .attr("fill","white")
							  	 .attr("text-anchor","middle")
							  	 .attr("font-size","18px")
							  	 .text(function(d){return Math.floor((d.endAngle-d.startAngle)*180/Math.PI)+"°";});*/
										
		</script>
		
	</body>
</html>
